<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input type="text" v-model="searchKeyword" placeholder="搜索备忘录" @input="handleSearchInput" />
    </view>
    <!-- 备忘录列表 -->
    <view class="memo-list">
      <view v-for="(memo, index) in memoList" :key="index" class="memo-item">
        <view class="memo-content">
          <text class="memo-title">{{ memo.title }}</text>
          <text class="memo-time">{{ memo.time }}</text>
        </view>
        <button class="delete-btn" @click="deleteMemo(memo._id)">删除</button>
      </view>
    </view>
    <!-- 新增备忘录按钮 -->
    <button class="add-btn" @click="showAddDialog = true">新增备忘录</button>
    <!-- 新增备忘录弹窗 -->
    <view class="add-dialog" v-show="showAddDialog">
      <view class="dialog-content">
        <view class="form-item">
          <input type="text" v-model="newMemoTitle" placeholder="周计划"/>
        </view>
        <view class="form-item">
          <input type="text" v-model="newMemoTime" placeholder="每周日"/>
        </view>
        <view class="btn-group">
          <button @click="addMemo">添加</button>
          <button @click="showAddDialog = false">取消</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      memoList: [], // 备忘录列表数据
      searchKeyword: '', // 搜索关键词
      showAddDialog: false, // 是否显示新增弹窗
      newMemoTitle: '', 
      newMemoTime: '' 
    };
  },
  onLoad() {
    this.getAllMemos(); // 页面加载时获取所有备忘录
  },
  methods: {
    // 获取所有备忘录
    async getAllMemos() {
      const res = await uniCloud.callFunction({
        name: 'getAllMemos'
      });
      if (res.result.code === 200) {
        this.memoList = res.result.data;
      } else {
        uni.showToast({
          title: res.result.message,
          icon: 'none'
        });
      }
    },
    // 新增备忘录
    async addMemo() {
      const res = await uniCloud.callFunction({
        name: 'addMemo',
        data: {
          title: this.newMemoTitle,
          time: this.newMemoTime
        }
      });
      if (res.result.code === 200) {
        uni.showToast({
          title: '新增成功'
        });
        this.showAddDialog = false;
        this.newMemoTitle = '';
        this.newMemoTime = '';
        this.getAllMemos(); // 新增成功后重新获取所有备忘录
      } else {
        uni.showToast({
          title: res.result.message,
          icon: 'none'
        });
      }
    },
    // 删除备忘录
    async deleteMemo(id) {
      const res = await uniCloud.callFunction({
        name: 'deleteMemo',
        data: {
          id
        }
      });
      if (res.result.code === 200) {
        uni.showToast({
          title: '删除成功'
        });
        this.getAllMemos(); // 删除成功后重新获取所有备忘录
      } else {
        uni.showToast({
          title: res.result.message,
          icon: 'none'
        });
      }
    },
    // 处理搜索输入
    async handleSearchInput() {
      if (this.searchKeyword.trim() === '') {
        this.getAllMemos(); // 关键词为空时获取所有备忘录
      } else {
        const res = await uniCloud.callFunction({
          name: 'fuzzySearchMemos',
          data: {
            keyword: this.searchKeyword
          }
        });
        if (res.result.code === 200) {
          this.memoList = res.result.data;
        } else {
          uni.showToast({
            title: res.result.message,
            icon: 'none'
          });
        }
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background: linear-gradient(left, #FF978D, #FFBB69);
}
.search-bar {
  margin-bottom: 20rpx;
}
.search-bar input {
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  padding: 10rpx;
  width: 100%;
}
.memo-list {
  margin-bottom: 20rpx;
}
.memo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx;
  border-bottom: 1rpx solid #eee;
}
.memo-content {
  flex: 1;
}
.memo-title {
  font-weight: bold;
  margin-bottom: 5rpx;
  display: block;
}
.memo-time {
  font-size: 24rpx;
  color: #666;
}
.delete-btn {
  background-color: #f56c6c;
  color: #fff;
  border-radius: 8rpx;
  padding: 8rpx 15rpx;
}
.add-btn {
  background-color: #409eff;
  color: #fff;
  border-radius: 8rpx;
  padding: 15rpx;
  width: 100%;
}
.add-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog-content {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  width: 80%;
}
.form-item {
  margin-bottom: 20rpx;
}
.form-item label {
  display: block;
  margin-bottom: 10rpx;
}
.form-item input {
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  padding: 10rpx;
  width: 100%;
}
.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}
.btn-group button {
  flex: 1;
  margin: 0 10rpx;
  padding: 15rpx;
  border-radius: 8rpx;
}
.btn-group button:first-child {
  background-color: #409eff;
  color: #fff;
}
.btn-group button:last-child {
  background-color: #ccc;
  color: #000;
}
</style>